<template>
    <div class="department-manager">
        <div class="header">
            <h2>部门管理</h2>
            <el-button type="primary" @click="handleAddDept">添加部门</el-button>
        </div>

        <el-table :data="departmentList" border style="width: 100%">
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column prop="name" label="部门名称" />
            <el-table-column label="管理者" width="180">
                <template #default="{ row }">
                    <manager-display :manager-id="row.managerId" />
                </template>
            </el-table-column>
            <el-table-column prop="code" label="部门编码" width="180" />
            <el-table-column label="操作" width="200">
                <template #default="{ row }">
                    <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
                    <el-button type="primary" link @click="handleSetManager(row)">设置管理者</el-button>
                    <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 设置管理者对话框 -->
        <el-dialog v-model="managerDialog.visible" title="设置部门管理者" width="500px">
            <el-form :model="managerDialog.form" label-width="100px">
                <el-form-item label="部门名称">
                    <span>{{ managerDialog.form.deptName }}</span>
                </el-form-item>
                <el-form-item label="选择管理者">
                    <user-selector v-model="managerDialog.form.managerId" @change="handleUserSelect" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="managerDialog.visible = false">取消</el-button>
                <el-button type="primary" @click="confirmSetManager">确认</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import ManagerDisplay from '@/components/ManagerDisplay.vue'
import UserSelector from '@/components/UserSelector.vue'

// 部门列表数据
const departmentList = ref([
    { id: 1, name: '产品质量部', managerId: 2, code: 'E10ADC3949BA59' },
    { id: 2, name: '法律部', managerId: 3, code: 'E10ADC3949BA59' },
    { id: 3, name: '信息技术部', managerId: 4, code: 'E10ADC3949BA59' },
    { id: 4, name: '人力资源部', managerId: 5, code: 'E10ADC3949BA59' },
    { id: 5, name: '行政管理部', managerId: 6, code: 'E10ADC3949BA59' }
])

// 管理者设置对话框
const managerDialog = reactive({
    visible: false,
    form: {
        deptId: null as number | null,
        deptName: '',
        managerId: undefined as number | undefined
    }
})

// 处理添加部门
const handleAddDept = () => {
    ElMessage.info('添加部门功能待实现')
}

// 处理编辑部门
const handleEdit = (row: any) => {
    ElMessage.info(`编辑部门: ${row.name}`)
}

// 处理设置管理者
const handleSetManager = (row: any) => {
    managerDialog.form.deptId = row.id
    managerDialog.form.deptName = row.name
    managerDialog.form.managerId = row.managerId || undefined
    managerDialog.visible = true
}

// 处理用户选择
const handleUserSelect = (userId: number) => {
    managerDialog.form.managerId = userId
}

// 确认设置管理者
const confirmSetManager = () => {
    if (!managerDialog.form.managerId) {
        ElMessage.warning('请选择管理者')
        return
    }

    // 更新部门管理者
    const deptIndex = departmentList.value.findIndex(dept => dept.id === managerDialog.form.deptId)
    if (deptIndex !== -1) {
        departmentList.value[deptIndex].managerId = managerDialog.form.managerId
        ElMessage.success(`已成功设置 ${departmentList.value[deptIndex].name} 的管理者`)
    }

    managerDialog.visible = false
}

// 处理删除部门
const handleDelete = (row: any) => {
    ElMessageBox.confirm(`确定要删除部门 "${row.name}" 吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        // 这里应该调用删除API，这里只是模拟
        const index = departmentList.value.findIndex(item => item.id === row.id)
        if (index !== -1) {
            departmentList.value.splice(index, 1)
            ElMessage.success('删除成功')
        }
    }).catch(() => {
        // 取消删除
    })
}

// 获取部门列表数据
const fetchDepartmentList = () => {
    // 这里应该调用API获取数据，这里使用的是静态数据
    // 实际项目中应该替换为API调用
}

onMounted(() => {
    fetchDepartmentList()
})
</script>

<style scoped>
.department-manager {
    padding: 20px;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

h2 {
    margin: 0;
}
</style>